<%@ include file="../common/IncludeTop.jsp"%>

<script src="${pageContext.request.contextPath}/js/order.js"></script>

<div id="Catalog" align="center">

    <ul id="nav">
        <li><a href="viewOrderForm">Payment Details</a></li>
        <li><a href="confirmOrder">Order Details</a></li>
    </ul>

    <form action="order" method="post">

    <table id="content">
        <tr>
            <th colspan=2>Payment Details</th>
        </tr>
        <tr>
            <td>Card Type:</td>
            <td>
                <select name="cardType">
                    <c:forEach items="${sessionScope.creditCardTypes}" var="cardType">
                        <option value="${cardType}">
                                ${cardType}
                        </option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td>Card Number:</td>
            <td>
                <input type="text" name="creditCard" value="${sessionScope.order.creditcard}">
            </td>
        </tr>
        <tr>
            <td>Expiry Date (MM/YYYY):</td>
            <td>
                <input type="text" name="expiryDate" value="${sessionScope.order.orderdate}">
            </td>
        </tr>
        <tr>
            <th colspan=2>Billing Address</th>
        </tr>

        <tr>
            <td>First name:</td>
            <td>
                <input type="text" id="firstName" name="firstName" value="${sessionScope.order.billtofirstname}">
            </td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td>
                <input type="text" id="lastName" name="lastName" value="${sessionScope.order.billtolastname}">
            </td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td>
                <input type="text" id="address1" name="address1" value="${sessionScope.order.billaddr1}">
            </td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td>
                <input type="text" id="address2" name="address2" value="${sessionScope.order.billaddr2}">
            </td>
        </tr>
        <tr>
            <td>City:</td>
            <td>
                <input type="text" id="city" name="city" value="${sessionScope.order.billcity}">
            </td>
        </tr>
        <tr>
            <td>State:</td>
            <td>
                <input type="text" id="state" name="state" value="${sessionScope.order.billstate}">
            </td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td>
                <input type="text" id="zip" name="zip" value="${sessionScope.order.billzip}">
            </td>
        </tr>
        <tr>
            <td>Country:</td>
            <td>
                <input type="text" id="country" name="country" value="${sessionScope.order.billcountry}">
            </td>
        </tr>

        <tr>
            <td colspan=2>
                <input type="checkbox" name="shippingAddressRequired" value="shippingAddressRequired">
                Ship to different address...
            </td>
        </tr>

    </table>

    <input type="submit" value="confirmed">

    </form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>